<template>
	<div class="space-list table-theme">
		<head-title title="运营--空间列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view
						:option-list="statusList"
						:value="status"
						placeholder="排序"
						type="status"
						@value="setSelectValue"
					>
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add">
						<el-button type="primary" @click="add">添加空间</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总数据数：{{total}}</p>
			<el-table :data="spaceList" border class="space-table">
				<el-table-column label="空间ID" align="center" prop="space_id" width="60"></el-table-column>
				<el-table-column label="空间名称" align="center" prop="space_name"></el-table-column>
				<el-table-column label="英文简称" align="center" prop="abbreviation"></el-table-column>
				<el-table-column label="描述" align="center" prop="desc" width="350"></el-table-column>
				<el-table-column label="空间图片" align="center" width="80">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.space_image"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="空间logo" align="center" width="90">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.space_logo"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="空间icon" align="center" width="90">
					<template slot-scope="scope">
						<ImgPopover :src="scope.row.space_icon"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="空间选择icon" align="center" width="120">
					<template slot-scope="scope">
						<ImgPopover baColor="#E0E0E0" :src="scope.row.space_select_icon"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="空间详情介绍图" align="center" width="120">
					<template slot-scope="scope">
						<ImgPopover baColor="#E0E0E0" :src="scope.row.space_img"></ImgPopover>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="sort" width="60"></el-table-column>
				<el-table-column label="店铺ID" align="center" prop="store_id" width="60"></el-table-column>
				<el-table-column label="上下架" align="center" width="180">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.space_status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.space_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.space_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 添加空间弹框 -->
		<el-dialog :title="title" :visible.sync="addDialog" width="700px" center :modal-append-to-body="false">
			<el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="120px">
				<div class="class-info">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="空间图片:" class="upload-box" prop="space_image">
								<div class="iconImg">
									<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(1,res); } "
									 multipleaccept="image/*"> <img v-if="addForm.space_image" :src="addForm.space_image" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</div>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="空间logo:" class="upload-box" prop="">
								<div class="iconImg">
									<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(2,res); } "
									 multipleaccept="image/*"> <img v-if="addForm.space_logo" :src="addForm.space_logo" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</div>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="ICON:" class="upload-box" prop="">
								<div class="iconImg">
									<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(3,res); } "
									 multipleaccept="image/*"> <img v-if="addForm.space_icon" :src="addForm.space_icon" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</div>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="空间选择ICON:" class="upload-box" prop="">
								<div class="iconImg">
									<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(4,res); } "
									 multipleaccept="image/*"> <img v-if="addForm.space_select_icon" :src="addForm.space_select_icon" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</div>
							</el-form-item>
						</el-col>
						
						<el-col :span="12">
							<el-form-item label="空间详情介绍图:" class="upload-box" prop="">
								<div class="iconImg">
									<el-upload class="avatar-uploader" ref="upload" action="fakeaction" :show-file-list="false" :http-request=" function(res) { return upload(5,res); } "
									 multipleaccept="image/*"> <img v-if="addForm.space_img" :src="addForm.space_img" class="avatar" />
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
								</div>
							</el-form-item>
						</el-col>
						
					</el-row>

					<div class="class-exhibition">
						<el-form-item label="空间名称:" prop="space_name">
							<el-input v-model="addForm.space_name" placeholder="请输入空间名称" clearable></el-input>
						</el-form-item>
						<el-form-item label="英文简称:" prop="">
							<el-input v-model="addForm.abbreviation" placeholder="请输入英文简称" clearable></el-input>
						</el-form-item>
						<el-form-item label="排序:" prop="sort">
							<el-input type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="addForm.sort"
							 placeholder="请输入排序" clearable></el-input>
						</el-form-item>
						<el-form-item label="上下架:" prop="space_status">
							<el-switch v-model="addForm.space_status" :active-value="1" :inactive-value="2"></el-switch>
						</el-form-item>
						<el-form-item label="描述:" prop="">
							<el-input type="textarea" :rows="2" placeholder="请输入描述" v-model="addForm.desc">
							</el-input>
						</el-form-item>

					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import ImgPopover from '@/components/ImgPopover';
	import SelectView from "@/components/SelectView";
	export default {
		components: {
			ImgPopover,
			SelectView
		},
		data() {
			return {
				title: '添加空间',
				submitType: '', // 提交的类型 0 增加 1编辑
				imageUrl: '',
				addDialog: false,
				spaceList: [],
				total: 0,
				totalData: 0,
				status: 1,
				statusList: [{
						value: 1,
						label: '上架'
					},
					{
						value: 2,
						label: '下架'
					}
				],
				page: 0,
				addForm: {
					space_name: '',
					space_img:'',
					space_image: '',
					space_logo: '',
					space_select_icon:'',
					space_icon: '',
					sort: '',
					abbreviation: '',
					desc: '',
					space_status: 1
				},
				addFormRules: {
					space_name: [{
						required: true,
						message: '请输入空间名称'
					}],
					space_image: [{
						required: true,
						message: '请上传空间图片'
					}],
					space_status: [{
						required: true,
						message: '上下架'
					}],
					sort: [{
						required: true,
						message: '请输入排序'
					}]
				},
				searchOption:[{
					value:0,
					label:"名称"
				}],
				selectContent:'',
				classSelect:0
			};
		},
		watch: {
			'addForm.sort': function(val) {
				if (this.addForm.sort < 0) {
					this.addForm.sort = 0;
					this.$message.error('请输入正确的排序');
				}
			}
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					space_status: this.status,
				};
				if (this.selectContent != '') {
					data.keyword = this.selectContent;
				}
				this.$http(this.$ApiList.ClassSpaceList, data).then(res => {
					this.spaceList = res.datas.data;
					this.total = res.datas.count;
					this.totalData = res.datas.count;
					
				});
			},

			// 上下架
			upDown(e, space_id) {
				let data = {
					status: e,
					space_id: space_id
				};
				this.$http(this.$ApiList.SpaceDown, data).then(res => {
					this.$layer.msg('操作成功');
					this.init();
				});
			},
			// 搜素
			goSearch(classSelect, selectContent) {
				this.classSelect = classSelect;
				this.selectContent = selectContent;
				this.init();
			},
			// 增加空间
			add() {
				this.title = '添加空间';
				this.imageUrl = '';
				this.submitType = 0;
				this.addForm = {
					space_name: '',
					space_image: '',
					space_logo: '',
					space_img:'',
					space_icon: '',
					space_select_icon:'',
					sort: '',
					abbreviation: '',
					desc: '',
					space_status: 1,
					store_id: localStorage.getItem('store_id')
				};
				this.addDialog = true;
			},
			// 删除
			del(id) {
				this.$confirm('此操作将永久删除该空间, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							space_id: id
						};
						this.$http(this.$ApiList.SpaceDel, data).then(res => {

							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.init();

						});
					})
					.catch(() => {});
			},
			// 编辑
			edit(content) {
				this.title = '编辑空间';
				this.submitType = 1;
				this.addForm = content;
				this.addDialog = true;
			},
			// 刷新
			refreshPage() {
				this.page = 1;
				this.status = 1;
				this.selectContent = '';
				this.init();
			},
			// 图标上传
			upload(type, params) {
				const file = params.file,
					fileType = file.type,
					isJPGPNG = file.type === 'image/jpeg' || 'image/png',
					isLt1MB = file.size / 1024 <= 1024;
				if (!isJPGPNG) {
					this.$message.error('只能上传图片格式png、jpg!');
					return;
				}
				if (!isLt1MB) {
					this.$message.error('图片不能大于1M');
					return;
				}

				let space_image = new FormData();
				space_image.append('file[]', file);
				this.$http(this.$ApiList.publicUpload, space_image).then(res => {
					if (type == 1) {
						this.addForm.space_image = res.datas[0];
					} else if (type == 2) {
						this.addForm.space_logo = res.datas[0];
					} else if (type == 3) {
						this.addForm.space_icon = res.datas[0];		
					}else if (type == 4) {
						this.addForm.space_select_icon = res.datas[0];	
					}else if (type == 5) {
						this.addForm.space_img = res.datas[0];	
					}

				});
			},
			submit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						// submitType 0新增 1编辑
						if (this.submitType == 0) {
							this.$http(this.$ApiList.UpSpace, this.addForm).then(res => {
								this.$layer.msg('提交成功');
								this.addDialog = false;
								this.init();
							});
						} else {
							this.$http(this.$ApiList.UpdateSpace, this.addForm).then(res => {

								this.$layer.msg('编辑成功');
								this.addDialog = false;
								this.init();

							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			setSelectValue(obj){
				const{ type,value } = obj
				switch (type) {
					case 'status':
						this.status = value
						break;
				
					default:
						break;
				}
				this.init()
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.space-list .avatar{
		background-color: #E0E0E0;
	}
</style>
